<template>
  <div style="background: #fff">
    <module-tabs class="yq-feedback" v-model="activeName" :tabs="tabs" is-flex-box>
      <template #first>
        <all-info />
      </template>
      <template #second>
        <div>
          <steps :active="0">
           <div v-if="!$lodash.isEmpty(data)">
            <step v-for="(item, idx) in data" :key="idx" :color="item.main | filterColor">
              <template v-slot:right>
                <div class="date">
                  <p>{{ item._date }}</p>
                  <p>{{ item._time }}</p>
                </div>
              </template>
              <div class="content">
                <div class="content__header">
                  <span :style="item.pszt | filterStyle">{{ item.pszt === '0' ? '不同意' : '同意' }}</span>
                  <h3>{{ item.psrName }}</h3>
                </div>
                <div class="content__inner">
                  <div class="content__approval">
                    <dg-row class="content__row">
                      <dg-col :span="2" class="content__label">批示单位：</dg-col>
                      <dg-col :span="22" v-if="item.psdwCode " v-code="{ BM_DEPT:item.psdwCode }"></dg-col>
                      <dg-col :span="22" v-else-if="!item.psdwCode ">-</dg-col>
                    </dg-row>
                    <dg-row>
                      <dg-col class="content__label" :span="2">批示意见：</dg-col>
                      <dg-col :span="22">{{ item.psnr | filterText }}</dg-col>
                    </dg-row>
                  </div>
                </div>
              </div>
            </step>
            </div>
            <!-- 无数据显示 -->
            <div v-else>
               <no-record></no-record>
            </div>
          </steps>
        </div>
      </template>
    </module-tabs>
  </div>
</template>
<script>
import AllInfo from '@/pages/ExterCommun/detail/components/AllInfo';
import ModuleTabs from '@/components/layout/module-tabs';

import { approvalDetail } from '@/api/submitReview';
import Steps from '@/components/step/steps';
import Step from '@/components/step/step';
import _ from 'lodash';

export default {
  name: 'Approval',
  components: {
    ModuleTabs,
    AllInfo,
    Steps,
    Step
  },
  data() {
    return {
      data: [],
      tabs: [
        {
          label: '基本信息',
          name: 'first'
        },
        {
          label: '领导批示',
          name: 'second'
        }
      ],
      activeName: 'second'
    };
  },
  filters: {
    filterColor(val) {
      switch (val) {
        case '同意':
          return '#52C41A ';
        case '拒绝':
          return '#F5222D';
        default:
          return '#FE8637';
      }
    },
    filterStyle(val) {
      let borderColor = '#FE8637 ';
      let color = '#FE8637 ';
      switch (val) {
        case '1':
          borderColor = '#52C41A ';
          color = '#52C41A ';
          break;
        case '0':
          borderColor = '#F5222D ';
          color = '#F5222D';
          break;
      }
      return {
        borderColor,
        color
      };
    }
  },
  mounted() {
    approvalDetail(this.$route.params.sid).then(({ data }) => {
      data._date = data.pssj.slice(0, 10);
      data._time = data.pssj.slice(11, 16);
      this.data = [data];
    });
  }
};
</script>
<style lang="scss" scoped>
.content {
  &__header {
    display: flex;
    align-items: center;
    transform: translateY(-24%);

    span {
      padding: 0px 12px;
      border: 1px solid;
      font-size: 12px;
      border-radius: 2px;
      margin-right: 12px;
      box-sizing: border-box;
      line-height: 22px;
    }

    h3 {
      font-size: 14px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      padding-bottom: 0;
    }
  }

  &__inner {
    color: #000000;
    /* padding-top: 20px; */
    padding: 6px 24px;
    margin-bottom: 52px;
    margin-top: 12px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.02);
  }
  &__row {
    margin-bottom: 8px;
  }

  &__label {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    text-align: right;
  }

  &__desc {
    margin-top: 12px;
    padding-bottom: 56px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    text-align: justify;
    line-height: 1.8;
  }
}
</style>
